<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #424242;
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .container {
            align-self: center;
            width: 230px;
            -moz-perspective: 900px;
            -webkit-perspective: 900px;
            perspective: 900px;
            position: relative;
        }
        .render {
            display: inline-block;
            z-index: 0;
            position: relative;
            line-height: 0.55em;
            height: 0.7em;
            -moz-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
            -moz-transform: rotateY(30deg);
            -webkit-transform: rotateY(30deg);
            transform: rotateY(30deg);
            font-family: 'Bree Serif', serif;
            font-size: 12em;
            color: #f5f5f5;
            text-shadow: white 0.006em 0.006em 1px, rgba(0, 0, 0, 0.15) -3px 7px 10px, #d0d0d0 -1px 1px 1px, #d0d0d0 -2px 1px 1px, #d0d0d0 -3px 1px 1px, #d0d0d0 -4px 1px 1px, #d0d0d0 -5px 1px 1px, #d0d0d0 -6px 1px 1px, #d0d0d0 -7px 1px 1px, #d0d0d0 -8px 1px 1px, #d0d0d0 -9px 1px 1px, #d0d0d0 -10px 1px 1px, #d0d0d0 -11px 1px 1px, #d0d0d0 -12px 1px 1px, rgba(255, 255, 255, 0.6) -5px 2px 100px;
        }
        .render.reflect {
            z-index: 0;
            opacity: 0.4;
            -moz-transform: rotateX(180deg) rotateY(-30deg);
            -webkit-transform: rotateX(180deg) rotateY(-30deg);
            transform: rotateX(180deg) rotateY(-30deg);
        }
        .render.shadow {
            opacity: 0.6;
            z-index: 2;
            color: transparent;
            letter-spacing: -0.02em;
            position: absolute;
            top: 0.36em;
            left: 0.1em;
            -moz-transform-origin: 0 0 50%;
            -ms-transform-origin: 0 0 50%;
            -webkit-transform-origin: 0 0 50%;
            transform-origin: 0 0 50%;
            -moz-transform: rotateX(-100deg) rotateY(-5deg) rotateZ(30deg);
            -webkit-transform: rotateX(-100deg) rotateY(-5deg) rotateZ(30deg);
            transform: rotateX(-100deg) rotateY(-5deg) rotateZ(30deg);
            text-shadow: rgba(0, 0, 0, 0.8) 0 0 30px, rgba(0, 0, 0, 0.8) 0 0 80px, black 0 0 150px, black 0 0 150px, black 0 0 250px, black 0 0 250px, white -0.15em 0.4em 250px;
        }
    </style>
</head>
<body>
<div class="container">
    <span class="render">3D</span>
    <span class="render shadow">- -</span>
    <span class="render reflect">3D</span>
</div>
</body>
</html>